<template>
  <div style="margin-bottom: 20px">
    <ButtonGroup
      v-if="!isEdit"
      :options="clueButtons"
      style="margin-bottom: 20px"
      @click="handleButtonClick"
    />
    <p-table
      class="table-list-container"
      row-key="id"
      :columns="columns"
      :pagination="false"
      bordered
      :data-source="selectCur"
      :scroll="{ y: 350 }"
      :loading="load"
      :row-selection="rowSelectionMixin"
      @change="handleTableChange"
    >
      <a
        slot="leadsNo"
        slot-scope="text, record"
        @click="handleNumberClick(record)"
      >
        {{ text }}
      </a>
    </p-table>
  </div>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';

export default {
  components: {},
  mixins: [mixinTable],
  props: {
    selectCur: {
      type: Array,
      default: () => [],
    },
    curKeys: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    load: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    stateOptions() {
      return this.$store.state.dictionary.dict['leads_status'] || {};
    },
    applicationOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '线索编号',
          dataIndex: 'leadsNo',
          scopedSlots: { customRender: 'leadsNo' },
        },
        {
          align: 'center',
          title: '线索名称',
          dataIndex: 'leadsName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '线索状态',
          dataIndex: 'leadsStatus',
          customRender: (text) => this.stateOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrgCode',
          customRender: (text) => this.orgOptions[text],
          ellipsis: true,
        },

        {
          align: 'center',
          title: '应用别',
          dataIndex: 'appCategory',
          customRender: (text) => this.applicationOptions[text],
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
        // {
        //   align: 'center',
        //   title: '创建人部门',
        //   dataIndex: 'leadsStatus',
        //   ellipsis: true,
        // },
      ];
      return columns;
    },
    clueButtons() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'clueAdd',
          type: 'primary',
          label: '关联线索',
          icon: 'plus',
          authKey: '',
        },
        {
          key: 'add',
          label: '新增线索',
          icon: 'plus',
          authKey: '',
        },
        {
          key: 'clueDelete',
          label: '删除',
          icon: 'delete',
          authKey: '',
          disabled,
        },
      ];
    },
  },
  methods: {
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    clueAddCallback() {
      this.$emit('add-clue');
    },
    addCallback() {
      const routeUrl = this.$router.resolve({
        path: '/clue-creation',
        query: {
          creation: 'true',
        },
      });
      window.open(routeUrl.href);
    },
    handleNumberClick(record) {
      const routeUrl = this.$router.resolve({
        path: '/clue-follow',
        query: {
          leadsNo: record.leadsNo,
          processId: record.processId,
        },
      });
      window.open(routeUrl.href);
    },
    clueDeleteCallback() {
      const ids = [];
      this.rowSelectionMixin.selectedRows.forEach((item) => {
        ids.push(item.leadsNo);
      });
      this.$confirm(`该操作将删除 ${ids.length} 条数据，是否确认？`)
        .then(() => {
          this.$emit('delete-clue', ids);
          this.rowSelectionMixin.selectedRowKeys = [];
        })
        .catch(() => {
          // console.log('e: ', e);
        });
    },
  },
};
</script>
